<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7.元素关系</title>
</head>
<body>
    <div id="main">
        <div id="box1">段落内容1</div>
        <div id="box2">段落内容2</div>
        <div id="box3">段落内容3</div>
        
    </div>
    <div id="main1"></div>
</body>
<script>
    var div=document.getElementById('main')
    //获取某个元素对象父元素节点 例如div对象
    //
    var f=div.parentNode//返回的是Node对象可以是任意的节点，元素节点、文本节点、注释节点等
    //获取父元素
    var f1=div.parentElement//返回值只能是Element对象
    /* 元素是一个小范围的定义，必须是含有完整信息的结点才是一个元素，例如<div>...</div>。
    但是一个结点不一定是一个元素，而一个元素一定是一个结点。 */
    console.log(f)
    console.log(f1)
    //获取下一个元素Element对象
    console.log('获取下一个元素')
    var next1=div.nextElementSibling
    console.log(next1)
    //获取下一个节点Node对象 
    console.log('获取下一个节点')
    var next2=div.nextSibling
    console.log(next2)

    var p=document.createElement('p')
    //next2.appendChild(p)
    //获取上一个节点
    var upone=div.previousElementSibling
    var upone1=div.previousSibling
    console.log(upone)
    console.log(upone1)
    //获取第一个子元素和节点
    var first=div.firstElementChild
    var first1=div.firstChild
    console.log(first)
    console.log(first1)

    //获取最后一个子元素和节点
    var last=div.lastElementChild
    var last1=div.lastChild


    //获取所有子节点 包括换行节点
    var all=div.childNodes
    console.log('获取所有子节点')
    console.log(all)
   for(var i=0;i<all.length;i++){
        console.log(all[i].nodeType)
   }
</script>
</html>